<template>
    <div class="mainDiv">
        <el-table :data="list" :stripe="true" height="100%">
            <el-table-column prop="ordertype" label="收支分类">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.ordertype=='SRD'">收入单</el-tag>
                    <el-tag type="info" v-else-if="scope.row.ordertype=='LSD'">流水单</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.ordertype=='KKD'">开卡单</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.ordertype=='CZD'">充值单</el-tag>
                    <el-tag v-else-if="scope.row.ordertype=='HKD'">还款单</el-tag>
                    <el-tag color="#ef80e1" style="color: #fff" v-else-if="scope.row.ordertype=='TKD'">退卡单</el-tag>
                    <el-tag color="#ba80ef" style="color: #fff" v-else-if="scope.row.ordertype=='TQD'">退款单</el-tag>
                    <el-tag color="#b0b2ca" style="color: #fff" v-else-if="scope.row.ordertype=='ZCD'">支出单</el-tag>
                    <el-tag v-else>其他</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="收支金额">
                <template slot-scope="scope">{{scope.row.money+'元'}}</template>
            </el-table-column>
            <el-table-column prop="type" label="收支类型">
                <template slot-scope="scope">
                    <i v-if="scope.row.type==1" style="color:#91b6d6;">收入</i>
                    <i v-else-if="scope.row.type==2" style="color: #a5ad50;">支出</i>
                    <i v-else>其他</i>
                </template>
            </el-table-column>
            <el-table-column prop="addtime" label="收支日期" widht="150">
                <template slot-scope="scope">{{time(scope.row.addtime)}}</template>
            </el-table-column>
            <el-table-column label="订单详情">
                <template slot-scope="scope">
                    <span v-if="scope.row.ordertype == 'ZCD' || scope.row.ordertype == 'SRD'"></span>
                    <el-button type="primary" icon="h-chakan" size="small" @click="look(scope.row)" v-else>查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="rowHead">
            <el-pagination @current-change="currChan" layout="prev, pager, next" :current-page="pages" :page-size="limits" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'

export default {
  name: 'moneyInfo',
  data () {
    return {
      list: [],
      id: C.getDatas().id,
      sta: C.getDatas().times[0],
      end: C.getDatas().times[1],
      pages: 1,
      limits: 15,
      total: 0,
      tp: C.getDatas().tp
    }
  },
  methods: {
    look: async function (row) {
      let obj = { id: row.orderid, ordertype: row.ordertype }
      await P.showOrderPopup(obj)
    },
    currChan: function (val) {
      this.pages = val
      this.getList()
    },
    time: function (unix) {
      return C.times(unix)
    },
    getList: async function () {
      let url = '/shop/money/lookinfo'
      let page = {
        id: this.id,
        sta: Math.round(this.sta / 1000),
        end: Math.round(this.end / 1000),
        pages: this.pages,
        limits: this.limits,
        tp: this.tp
      }
      let res = await C.ajax(url, page, 'post')
      if (res) {
        this.list = res.data
        this.total = res.count
      }
    }
  },
  mounted: function () {
    this.getList()
  }
}
</script>